<template>
  <div class="hm-order">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="width: 100%">
      <el-input
        v-model="users.query"
        class="ipt"
        clearable
        placeholder="请输入内容"
        style="width: 300px"
      >
      </el-input>
      <el-button class="el-icon-search" type="info" @click="getList"></el-button>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="index"
          width="50px">
        </el-table-column>
        <el-table-column
          label="订单编号"
          prop="order_number"
          width="280">
        </el-table-column>
        <el-table-column
          label="订单价格"
          prop="order_price"
          width="180">
        </el-table-column>
        <el-table-column
          label="是否付款"
          prop="order_pay"
          width="100px">
          <template #default="{row}">
            <el-tag v-if="row.order_pay==='0'" type="danger">未付款</el-tag>
            <el-tag v-else type="success">已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="是否发货"
          prop="is_send"
          width="100px">
        </el-table-column>
        <el-table-column
          label="下单时间"
          prop="create_time">
        </el-table-column>
        <el-table-column
          label="操作"
          prop="address">
          <template #default="{row}">
            <el-button @click="edit('bianji',row)">编辑</el-button>
            <el-button @click="edit('jindu',row)">物流进度</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="users.pagenum"
        :page-size="users.pagesize"
        :page-sizes="[10,20,30]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="70%">
        <el-card v-if="type!=='bianji'" style="width: 100%">
          <el-timeline>
            <el-timeline-item v-for="item in wuliu" :key="item.id" placement="top">
              <el-card>
                <p>{{ item.context }}</p>
                <p>{{ item.time }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
        <el-form v-else>
          <el-form-item label="订单价格" prop="cat_name">
            <template #default>
              <el-input v-model="data.order_price"></el-input>
              <span>是否付款：</span>
              <el-radio v-model="data.order_pay" label="1">已付款</el-radio>
              <el-radio v-model="data.order_pay" label="0">未付款</el-radio>
              <br>
              <span>是否发货：</span>
              <el-radio v-model="data.is_send" label="是">是</el-radio>
              <el-radio v-model="data.is_send" label="否">否</el-radio>
            </template>
            <el-input v-model="value"></el-input>
          </el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </el-form>

      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { editOrder, getOrderList } from '@/api/order'

export default {
  name: 'hm-order',
  computed: {
    title () {
      if (this.type === 'bianji') return '修改订单数据'
      if (this.type === 'jindu') return '物流进度'
      return '我是大帅哥'
    }
  },
  data () {
    return {
      dialogVisible: false,
      value: '',
      type: '',
      total: 0,
      tableData: [],
      users: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      data: {},
      wuliu: [
        {
          time: '2020-07-15 12:39:56',
          ftime: '2020-07-15 12:39:56',
          context: '已签收,签收人是（快递已送代理点如有问题请联系11053685196）先生/女士，如有疑问请联系派件员寒亭魏飞飞(11053685196、0530-18194261)，如您未收到此快递，请拨打投诉电话：0530--17366376，感谢使用申通快递，期待再次为您服务',
          location: null
        },
        {
          time: '2020-07-15 08:46:54',
          ftime: '2020-07-15 08:46:54',
          context: '山东潍坊寒亭营业厅-寒亭魏飞飞(11053685196,0530-18194261)-派件中',
          location: null
        },
        {
          time: '2020-07-15 08:38:57',
          ftime: '2020-07-15 08:38:57',
          context: '已到达-山东潍坊寒亭营业厅',
          location: null
        },
        {
          time: '2020-07-15 06:38:13',
          ftime: '2020-07-15 06:38:13',
          context: '已到达-山东潍坊寒亭营业厅',
          location: null
        },
        {
          time: '2020-07-14 20:56:45',
          ftime: '2020-07-14 20:56:45',
          context: '山东潍坊转运中心-已发往-山东潍坊寒亭公司',
          location: null
        },
        {
          time: '2020-07-14 20:52:44',
          ftime: '2020-07-14 20:52:44',
          context: '已到达-山东潍坊转运中心',
          location: null
        },
        {
          time: '2020-07-14 17:43:48',
          ftime: '2020-07-14 17:43:48',
          context: '已到达-山东潍坊转运中心',
          location: null
        },
        {
          time: '2020-07-14 10:53:46',
          ftime: '2020-07-14 10:53:46',
          context: '山东临沂转运中心-已发往-山东潍坊转运中心',
          location: null
        },
        {
          time: '2020-07-14 10:43:31',
          ftime: '2020-07-14 10:43:31',
          context: '已到达-山东临沂转运中心',
          location: null
        },
        {
          time: '2020-07-14 02:43:20',
          ftime: '2020-07-14 02:43:20',
          context: '安徽合肥转运中心-已发往-山东临沂转运中心',
          location: null
        },
        {
          time: '2020-07-14 02:41:40',
          ftime: '2020-07-14 02:41:40',
          context: '已到达-安徽合肥转运中心',
          location: null
        },
        {
          time: '2020-07-13 16:28:13',
          ftime: '2020-07-13 16:28:13',
          context: '安徽阜阳转运中心-已发往-安徽合肥转运中心',
          location: null
        },
        {
          time: '2020-07-13 15:03:30',
          ftime: '2020-07-13 15:03:30',
          context: '安徽利辛公司-已发往-安徽阜阳转运中心',
          location: null
        },
        {
          time: '2020-07-13 14:47:56',
          ftime: '2020-07-13 14:47:56',
          context: '安徽利辛公司-已发往-安徽阜阳转运中心',
          location: null
        },
        {
          time: '2020-07-13 14:37:06',
          ftime: '2020-07-13 14:37:06',
          context: '安徽利辛公司-城南吴彦祖-已收件',
          location: null
        }
      ]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async submit () {
      if (this.type === 'bianji') {
        const res = await editOrder(this.data.order_id, this.data)
        this.dialogVisible = false
        this.$message.info(res.meta.msg)
      }
    },
    async edit (type, row) {
      this.type = type
      this.data = row
      if (this.type === 'bianji') {
        this.dialogVisible = true
        console.log(this.data)
      } else if (this.type === 'jindu') {
        this.dialogVisible = true
      }
    },
    handleSizeChange (newSize) {
      this.users.pagesize = newSize
      this.getList()
    },
    handleCurrentChange (newpage) {
      this.users.pagenum = newpage
      this.getList()
    },
    async getList () {
      const res = await getOrderList(this.users)
      this.tableData = res.data.goods
      this.total = res.data.total
    }
  }
}
</script>

<style lang="scss" scoped>
.hm-order {

}
</style>
